<template>
  <view class="calendar__month">
    <view
      v-if="visible"
      class="calendar__days"
    >
      <view
        v-if="showMark"
        class="calendar__month-mark"
      >
        {{mark}}
      </view>

      <view
        v-for="(item,index) in monthDates"
        :key="index"
        :data-index="index"
        class="calendar__day"
        @tap="onClick"
      >
        <view class="calendar__day-wrap">
          <view
            class="calendar__info"
            :class="[item.type ? 'calendar__'+item.type+'-day' : '', item.date===currentDate?'calendar__selected-day':'']"
          >
            <view
              v-if="item.badge"
              class="calendar__info-badge"
            >
              {{ showBadgeText?item.badge:'' }}
            </view>
            <view class="calendar__info-text">{{ item.text }}</view>
            <view class="calendar__info-bottom">{{ item.bottomInfo }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getDate
} from './utils'
export default {
  name: 'Month',
  props: {
    date: String,
    color: String,
    minDate: String,
    maxDate: String,
    showMark: {
      type: Boolean,
      default: true
    },
    rowHeight: null,
    formatter: {
      type: Function,
      observer (val) {
        console.log('set default date')
      }
    },
    allowSameDay: {
      type: Boolean,
      default: true
    },
    showSubtitle: {
      type: Boolean,
      default: true
    },
    showMonthTitle: {
      type: Boolean,
      default: true
    },
    showBadgeText: {
      type: Boolean,
      default: false
    },
    refresh: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: true,
      monthDates: []
    }
  },
  created () {
    console.group('MonthCreated')
    this.setMonthDates()
    console.groupEnd('MonthCreated')
  },

  watch: {
    date (v, o) {
      const nowDate = new Date(v)
      const nowMonth = nowDate.getMonth()
      const oldMonth = new Date(o).getMonth()
      if (nowMonth !== oldMonth) {
        console.group('MonthWatchChanged')
        this.setMonthDates()
        console.groupEnd('MonthWatchChanged')
      }
    },
    refresh () {
      this.onRemountDate()
    }
  },
  computed: {
    mark () {
      return this.$moment(this.date).locale('en').format('MMM').toUpperCase()
    },
    currentDate () {
      return this.$moment(this.date).format('YYYY-MM-DD')
    }
  },
  methods: {
    onClick (event) {
      const { index } = event.currentTarget.dataset
      const item = this.monthDates[index]
      if (item.type !== 'disabled') {
        this.$emit('click', item)
      }
    },
    setMonthDates () {
      console.group('setMonthDates')
      console.log('minDate:', this.minDate)
      console.log('maxDate:', this.maxDate)
      console.log('date:', this.date)
      const minDate = this.$moment(this.minDate).startOf('day')
      const maxDate = this.$moment(this.maxDate).startOf('day')
      let monthStart = this.$moment(this.date).startOf('month')
      let startDay = this.$moment(monthStart).startOf('week')
      let monthEnd = this.$moment(this.date).endOf('month').startOf('day')
      let endDay = this.$moment(monthEnd).endOf('week').startOf('day')
      const days = endDay.diff(startDay, 'days') + 1

      const dates = []
      for (let i = 0; i < days; i++) {
        let date = this.$moment(startDay).add(i, 'days')
        const day = date.format('D')
        let type = 'default'
        if (date.diff(minDate, 'days') <= 0) {
          type = 'disabled'
        } else if (date.diff(monthStart, 'days') < 0) {
          type = 'prev'
        } else if (maxDate.diff(date, 'days') < 0) {
          type = 'disabled'
        } else if (monthEnd.diff(date, 'days') < 0) {
          type = 'next'
        }
        dates.push(this.formatDateData(date.format('YYYY-MM-DD'), type, day))
      }
      this.monthDates = dates
      console.log('format completed')
      console.groupEnd('setMonthDates')
    },
    formatMonthTitle (date) {
      date = getDate(date)
      return date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
    },
    formatDateData (date, type, day) {
      let config = {
        date: date,
        type: type,
        text: day,
        badge: '',
        bottomInfo: ''
      }
      if (this.formatter) {
        config = this.formatter(config)
      }
      return config
    },
    onRemountDate () {
      for (let i = 0, size = this.monthDates.length; i < size; i++) {
        const item = this.monthDates[i]
        this.monthDates[i] = {
          ...this.formatDateData(item.date, item.type, item.text)
        }
      }
    }
  }
}
</script>

<style lang="less">
</style>
